
class Swiper {
    initParams = {
        activeIndex:0,
        class:2,
        autoplay:true ,
        playDirection:'right',
        sliderTo:1
    }
    touchDirection = 'right'
    translateX = 0 ;
    constructor(...arg) {
        this.el = arg[0] ,
        console.log(this.el)
        this.initParams = Object.assign(this.initParams,arg[1])
        this.init()
    }
    init(){
        let { autoplay } = this.initParams ;
        // console.log(this.el.children[0].classList.contains("slider-contanier"))
        this.slider = this.el.querySelectorAll(".slider") ; //所有滚动页面
        this.sliderWidth = this.slider[0].clientWidth ; //当前页的宽度
        this.sliderContanier = this.el.querySelectorAll(".slider-contanier")[0] ;
        this.sliderBar = this.el.querySelectorAll(".scrollbar-slider") ;
        if(autoplay){
            this.auto()
        }
        this.el.addEventListener('touchstart',this.touchStart.bind(this))
        this.el.addEventListener('touchmove',this.touchmove.bind(this))
        this.el.addEventListener('touchend',this.touchend.bind(this))
        let _this = this ;
        for (let i=0;i<this.sliderBar.length;i++) {
            this.sliderBar[i].addEventListener('click',(event) => {
                _this.scrollbarClick(event,i)
            });
        }
    }
    auto(){
        this.touchDirection = this.initParams.playDirection ;
        setInterval(() =>{
            this.runAnimation() ;
        },3000)
    }
    getDirection(pageX){
        let diff = pageX - this.touchstartX;
        if(diff > 0){
            this.touchDirection = 'left' ; //从左往右做滑动
        }else{
             this.touchDirection = 'right' //从右往左做滑动
        }
    }
    touchStart(event){
        console.log(event)
        let { clientX } = event.targetTouches[0]
            this.touchstartX = clientX;
    }
    touchmove(){
        let { clientX } = event.targetTouches[0]
        console.log(this)
        this.getDirection(clientX)
    }
    touchend(){
        this.runAnimation()
    }
    getDirection(pageX){
        let diff = pageX - this.touchstartX;
        if(diff > 0){
            this.touchDirection = 'left' ; //从左往右做滑动
        }else{
             this.touchDirection = 'right' //从右往左做滑动
        }
    }
    //运动
    runAnimation(Direction){
        let currentPage = Math.abs(this.translateX) / this.sliderWidth + 1 ,
            totalPage = this.slider.length ;
        if(this.touchDirection == 'left'){
            if(currentPage <= 1) return ;
            this.translateX = ~~this.translateX + ~~this.sliderWidth ;
            currentPage = currentPage - 1
        }
        else if(this.touchDirection == 'right'){
            if(currentPage >= totalPage) return ;
            this.translateX = ~~this.translateX - ~~this.sliderWidth ;
            currentPage = currentPage + 1
        }
        this.setX()
        this.activeIndex = currentPage - 1 ;
    }
    setX(){
        this.sliderContanier.style.transform = 'translateX('+this.translateX+'px)' ;
    }
    scrollbarClick(e,index){
        console.log(e,index)
        this.translateX = -this.sliderWidth * index ;
       
    }
    //过渡效果结束之后
    transitionEnd(callback){
        let _callback = callback ;
        this.el.addEventListener('transitionend',() => {
            _callback()
        })
    }
}
module.exports = Swiper ;